<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>投递量折线图</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <Card style="margin-bottom: 10px">
                    <div>
                        <div class="clearfix">
                            <Col span="5"
                                 class="mr-10">
                            <sele @ProvinceData="childByValue"></sele>
                            </Col>
                            <Select placeholder="请选择垃圾类型"
                                    :clearable=true
                                    v-model="queryData.code"
                                    style="width: 150px;margin:0 20px">
                                <Option v-for="item in typeList"
                                        :value="item.value"
                                        :key="item.value">{{ item.label }}</Option>
                            </Select>

                            <Select v-model="queryData.type"
                                    placeholder="请选择统计方式"
                                    @on-change="changeType"
                                    style="width: 100px;margin:0 20px">
                                <Option v-for="item in dataType"
                                        :value="item.value"
                                        :key="item.value">{{ item.label }}</Option>
                            </Select>
                            <br />
                            <DatePicker v-model="queryData.startTime"
                                        :clearable=false
                                        :editable=false
                                        format="yyyy/MM/dd"
                                        :type="type"
                                        placement="bottom-end"
                                        placeholder="开始时间"
                                        style="width: 200px;margin-top:20px"></DatePicker>
                            &nbsp;-&nbsp;
                            <DatePicker v-model="queryData.endTime"
                                        :clearable=false
                                        :editable=false
                                        format="yyyy/MM/dd"
                                        :type="type"
                                        placement="bottom-end"
                                        placeholder="结束时间"
                                        style="width: 200px;margin-top:20px;margin-right:20px"></DatePicker>
                            <Button type="primary"
                                    custom-icon="iconfont icon-chaxun"
                                    size="small"
                                    @click="getData()">查询</Button>
                        </div>
                    </div>
                </Card>

                <div id="echarts"
                     style="height:600px"></div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import gcWeightApi from '@/api/gc/weight.js'
import { Message } from 'iview'
import global from '@/assets/js/global'
import sele from '@/view/test/city.vue'
export default {
	components: {
		sele
	},
	data() {
		return {
			// 页面查询数据

			data: [],
			title: '',
			areaData: [],
			queryData: {
				type: 'day',
				startTime: this.oneMonth(),
				endTime: this.nowDate()
				// selectArea: 0,
				// date: []
			},
			myChart: null,
			option: {},
			typeList: [
				{
					label: '可回收',
					value: 12
				},
				{
					label: '易腐垃圾 ',
					value: 11
				},
				{
					label: '其他垃圾 ',
					value: 13
				},
				{
					label: '有毒有害 ',
					value: 14
				}
			],
			dataType: [
				{
					label: '日',
					value: 'day'
				},
				{
					label: '月 ',
					value: 'month'
				},
				{
					label: '年 ',
					value: 'year'
				}
			],
			type: 'date'
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		getData() {
			this.queryData.startTime = global.time(this.queryData.startTime)
			this.queryData.endTime = global.time(this.queryData.endTime)
			gcWeightApi.getPageList(this.queryData).then(res => {
				console.log(res, 'res')
				this.myChart1(res.data)
			})
		},
		changeType(val) {
			console.log(val)
			if (val == 'day') {
				this.type = 'date'
			} else {
				this.type = val
			}
		},
		oneMonth() {
			const dates = new Date()
			dates.setMonth(dates.getMonth() - 1)
			let pastMonth = dates.getMonth() + 1
			let pastDay = dates.getDate()
			if (pastMonth >= 1 && pastMonth <= 9) {
				pastMonth = '0' + pastMonth
			}
			if (pastDay >= 0 && pastDay <= 9) {
				pastDay = '0' + pastDay
			}
			const endDate =
				dates.getFullYear() + '-' + pastMonth + '-' + pastDay
			return endDate
		},
		nowDate() {
			const loadYear = new Date().getFullYear()
			let loadMonth = new Date().getMonth() + 1
			let loadDay = new Date().getDate()
			if (loadMonth >= 1 && loadMonth <= 9) {
				loadMonth = '0' + loadMonth
			}
			if (loadDay >= 0 && loadDay <= 9) {
				loadDay = '0' + loadDay
			}
			const date = loadYear + '-' + loadMonth + '-' + loadDay
			return date
		},
		myChart1(data) {
			let dataList = []
			let dateList = []
			data.forEach(element => {
				dataList.push(element.weight)
				dateList.push(element.submittime)
			})
			let myChart = this.$echarts.init(document.getElementById('echarts'))
			const option = {
				title: {
					text: '投递量'
				},
				xAxis: {
					type: 'category',
					data: dateList,
					axisLabel: {
						fontSize: 12,
						rotate: 45
					}
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value} kg'
					}
				},
				series: [
					{
						data: dataList,
						type: 'line'
					}
				]
			}
			myChart.setOption(option)
			myChart.resize()
		},
		// 六级联动数据获取
		childByValue(data) {
			let area = this.queryData
			area.provid = data.provid || ''
			area.cityid = data.cityid || ''
			area.distid = data.distid || ''
			area.strtid = data.strtid || ''
			area.commid = data.commid || ''
			area.comminid = data.comminid || ''
		}
	}
}
</script>
